<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
		
		<style type="text/css">
			body{
				background: #d1ccc0;
				
			}
			.body{
				
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				
				
			}
			.products{
				position: absolute;
				top: 20px;
				width: 90%;
				
				display: flex;
				
				flex-wrap: wrap;
			}
			#item{
				position: relative;
				width: 23%;
				height: 250px;
				
				margin-right: 20px;
				margin-bottom: 20px;
				border: #fed330 solid 3px;
				background: #f7f1e3;
				border-radius: 15px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-family: 'Roboto';
				font-style: normal;
				font-weight: 700;
				font-size: 16px;
				line-height: 19px;
			}
			#item:hover{
				background: #FFC312;
			}
			.item_img{
				position: absolute;
				border-radius: 8px;
				top: 15px;
				width: 90%;
				height: 60%;
				
			}
			.item_name{
				position: absolute;
				text-align: center;
				width:90% ;
				height: 20%;
				bottom: 10%;
			}
			.price{
				position: absolute;
				bottom: 5%;
				
			}
		</style>
	</head>
	<body>
	
		<div id="" class="container-fluid body">
			<div class="products col-md-12">
				{% for item in data %}
				<div id="item"  onclick="getInfo({{item.DNO}})">
					<img class="item_img" src={{item.pic}} >
					<div class="item_name">
						{{item.DNAME}}
					</div>
					<div class="price">
						￥{{item.price}}
					</div>
				</div>
				{% endfor %}
			</div>
			
			
			
		</div>
		
		<script type="text/javascript" src="../../../static/js/jquery-3.6.0.min.js">
			
		</script>
		<script type="text/javascript">
		
			
				
				function getInfo(id){
					//location.href = '/home'
					location.href='/dish_info?id='+id
					
				
				}
				
				
		
		</script>
	</body>
</html>
